<template>
  <el-dialog 
    v-model="dialogVisible" 
    :title="form.id ? '编辑位置类型' : '新增位置类型'" 
    width="500px"
    @closed="handleClosed">
    <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="类型名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入位置类型名称" />
      </el-form-item>
      <el-form-item label="图标" prop="icon">
        <el-input v-model="form.icon" placeholder="请输入图标" style="width: 80%;" />
        <el-button type="primary" @click="openIconSelector" style="margin-left: 10px;">选择</el-button>
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input-number v-model="form.sort" :min="0" :max="999" />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="form.status">
          <el-radio :label="1">启用</el-radio>
          <el-radio :label="0">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="form.remark" type="textarea" placeholder="请输入备注信息" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </span>
    </template>
    
    <!-- 图标选择器 -->
    <el-dialog v-model="iconDialogVisible" title="选择图标" width="700px" append-to-body>
      <div class="icon-container">
        <div 
          v-for="icon in iconList" 
          :key="icon" 
          class="icon-item" 
          @click="selectIcon(icon)">
          <i :class="icon"></i>
          <span>{{ icon }}</span>
        </div>
      </div>
    </el-dialog>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, defineEmits, defineProps, defineExpose, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { addLocationType, updateLocationType, getLocationType } from '@/api/location'

const props = defineProps({
  id: {
    type: [Number, String],
    default: null
  }
})

const emit = defineEmits(['refresh', 'update:id'])

const dialogVisible = ref(false)
const iconDialogVisible = ref(false)
const formRef = ref(null)
const form = reactive({
  id: null,
  name: '',
  icon: '',
  sort: 0,
  status: 1,
  remark: ''
})

const rules = {
  name: [{ required: true, message: '请输入类型名称', trigger: 'blur' }],
  icon: [{ required: true, message: '请选择图标', trigger: 'blur' }],
  sort: [{ required: true, message: '请输入排序号', trigger: 'blur' }],
  status: [{ required: true, message: '请选择状态', trigger: 'change' }]
}

// 常用图标列表
const iconList = [
  'el-icon-location', 'el-icon-map-location', 'el-icon-office-building', 'el-icon-school', 
  'el-icon-house', 'el-icon-toilet', 'el-icon-food', 'el-icon-dish', 'el-icon-tableware', 
  'el-icon-shopping-cart-full', 'el-icon-shopping-bag', 'el-icon-present', 'el-icon-ice-cream',
  'el-icon-dessert', 'el-icon-sugar', 'el-icon-burger', 'el-icon-chicken', 'el-icon-coffee-cup',
  'el-icon-cold-drink', 'el-icon-goblet', 'el-icon-bicycle', 'el-icon-truck', 'el-icon-ship',
  'el-icon-basketball', 'el-icon-football', 'el-icon-soccer', 'el-icon-baseball', 'el-icon-medal',
  'el-icon-trophy', 'el-icon-alarm-clock', 'el-icon-watch', 'el-icon-camera', 'el-icon-picture',
  'el-icon-sunrise', 'el-icon-sunset', 'el-icon-moon', 'el-icon-cloudy', 'el-icon-partly-cloudy',
  'el-icon-lightning', 'el-icon-umbrella', 'el-icon-heavy-rain', 'el-icon-sunrise-1', 'el-icon-sunset-1'
]

// 监听ID变化
watch(() => props.id, async (newVal) => {
  if (newVal) {
    dialogVisible.value = true
    await getTypeDetail(newVal)
  }
})

// 获取类型详情
const getTypeDetail = async (id) => {
  try {
    const res = await getLocationType(id)
    if (res.data) {
      Object.assign(form, res.data)
    }
  } catch (error) {
    console.error('获取位置类型详情失败', error)
  }
}

// 打开图标选择器
const openIconSelector = () => {
  iconDialogVisible.value = true
}

// 选择图标
const selectIcon = (icon) => {
  form.icon = icon
  iconDialogVisible.value = false
}

// 提交表单
const handleSubmit = async () => {
  if (!formRef.value) return
  
  try {
    await formRef.value.validate()
    
    if (form.id) {
      await updateLocationType(form.id, form)
      ElMessage.success('更新位置类型成功')
    } else {
      await addLocationType(form)
      ElMessage.success('新增位置类型成功')
    }
    
    dialogVisible.value = false
    emit('refresh')
  } catch (error) {
    console.error('提交表单失败', error)
    ElMessage.error(error.message || '操作失败')
  }
}

// 对话框关闭后的处理
const handleClosed = () => {
  formRef.value?.resetFields()
  Object.assign(form, {
    id: null,
    name: '',
    icon: '',
    sort: 0,
    status: 1,
    remark: ''
  })
  emit('update:id', null)
}

// 对外暴露的方法
const open = (id = null) => {
  if (id) {
    form.id = id
    getTypeDetail(id)
  }
  dialogVisible.value = true
}

defineExpose({
  open
})
</script>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}

.icon-container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  max-height: 400px;
  overflow-y: auto;
}

.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100px;
  height: 80px;
  padding: 8px;
  cursor: pointer;
  border: 1px solid #eee;
  border-radius: 4px;
  transition: all 0.3s;
}

.icon-item:hover {
  background-color: #f5f7fa;
  border-color: #409eff;
}

.icon-item i {
  font-size: 24px;
  margin-bottom: 8px;
}

.icon-item span {
  font-size: 12px;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  text-align: center;
}
</style> 